<template>
	<div>
		<div class="box">
		<div class="des">
			<div class="desbanner">
				<p class="title1">
					面向大学生的前端技术学习平台
				</p>
				<p class="title2">
					由百度创办的免费前端技术学习实践、交流、分享平台
				</p>
				<a style="border: 1px solid #38ba72;color: white;" href="javascript:;"><span>完全免费 立即报名</span></a>
				<a style="border: 1px solid #ACA7A6; background-color: rgba(166,166,166,.1);color: white;" target="_blank" href="https://mp.weixin.qq.com/s/q26ZjCvVFIB3GXZtsk_hWw"><span>学院介绍</span></a>
			</div>
		</div>
		</div>
		<div class="learnstep">
		</div>
		<!-- 学院详情 -->
		<div class="collegeInfo">
			<p>
				学院详情
			</p>
		</div>
		<div class="collegeBox">
		<!-- 详情卡片组件 -->
		    <College v-for="(item,i) in collegeList" :key="i" :url="item.url" :img="item.img" :name="item.name" :desc="item.desc" :tag="item.tag"/>
		</div>
		<!-- 教师展示 -->
		<div class="teacherTitle"></div>
		<div class="teacherBox">
			<!-- 教师卡片组件 -->
			<Teacher v-for="(item,i) in teacherList" :key="i" :name="item.name" :img="item.img" :tag="item.tag" :desc="item.desc" :url="item.url"></Teacher>
			
		</div>
	</div>
</template>

<script>
	import Teacher from '../assembly/teacher.vue'
	import College from '../assembly/college.vue'
	export default {
		components:{
			Teacher,
			College
		},
		data(){
			return {
				    collegeList:[
						{
						 url:'http://ife.baidu.com/college/detail/id/5',
		                 img:'https://eopa.bdstatic.com/ife/0jichus.jpg', 
		                 name:'零基础学院',
		                 desc:'从零开始，66天，带你一起体验前端之美。ife 2018零基础班帮你建立学习的习惯与方法。',
                         tag:['html','css','vue'],
						 },
						 {
						  url:'http://ife.baidu.com/college/detail/id/6',
						  img:'https://eopa.bdstatic.com/ife%2Fmvvm%E5%B0%8F.jpg', 
						  name:'MVVM学院',
						  desc:'基于百度自研的MVVM框架--SAN，由百度EFE的十多位同学通力打造，由浅入深，帮助你掌握目前主流的前端开发模式。',
						  tag:['SAN','MVVM'],
						  },
						  {
						   url:'http://ife.baidu.com/college/detail/id/8',
						   img:'https://eopa.bdstatic.com/ife%2Fcss%E5%B0%8F.jpg', 
						   name:'设计师学院',
						   desc:'你是否知道我们可以利用纯 CSS 制作一些很酷的动画效果？设计师学院，作者是任职于百度 Echarts 团队的前端工程师兼设计师，历经两个月，从设计到实现，一步步从零开始带你了解学习 CSS 前端动效。无论是复杂的动效细节还是最新的解决方案，在这里都能学习。',
						   tag:['CSS3','小谢'],
						   },
					],
					teacherList:[
					{name:'谢惠杰',img:'http://blog.cc456xie.cn/head.jpg',tag:[{type:'zhihu',tagurl:'http://blog.cc456xie.cn/'},{type:'weibo',tagurl:'http://blog.cc456xie.cn/'},{type:'github',tagurl:'https://github.com/cc456xie'}],desc:'一只默默前进的小前端...',url:'https://www.163.com/'},
					{name:'Varsha',img:'https://eopa.bdstatic.com/daoshi%2Fvarsha.png',tag:[],desc:'百度高级研发工程师，在MVVM、Node.js方向有多年研发经验，对代码实现有极致的要求，致力于成为前端技术专家。',url:'https://www.163.com/'},
					{name:'魏嘉汛',img:'https://eopa.bdstatic.com/daoshi/zuming.jpg',tag:[{type:'github',tagurl:'https://github.com/LeuisKen'}],desc:'百度前端工程师，常用ID：LeuisKen。长期专注于前端开发，希望自己的工作能够服务到更多的人。',url:'https://www.163.com/'},
					{name:'绿',img:'https://eopa.bdstatic.com/daoshi%2Fvarsha.png',tag:[{type:'zhihu',tagurl:'https://www.zhihu.com/people/xianchan'}],desc:'百度内容生态运营部前端工程师，任职于 ECharts 团队。喜欢探索新奇好玩的技术，更喜欢与你分享交流，用技术解决问题。',url:'https://www.163.com/'},
					{name:'詹方',img:'https://eopa.bdstatic.com/daoshi/zhanfang1.jpg',tag:[{type:'github',tagurl:'https://github.com/zhanfang'}],desc:'百度高级前端开发工程师，崇尚函数式编程，对san、react、vue、node有浓厚的兴趣，并持续学习中。',url:'https://www.163.com/'},
					{name:'刘超凡',img:'https://eopa.bdstatic.com/daoshi%2F%E8%B6%85%E5%87%A1%E5%A4%A7.jpg',tag:[{type:'zhihu',tagurl:'http://blog.cc456xie.cn/'}],desc:'百度内容运营生态部前端工程师，喜欢酷炫的新技术，努力寻找任何提高开发效率的解决方案',url:'https://www.163.com/'},
					{name:'王兵',img:'https://eopa.bdstatic.com/daoshi/wangbing.jpg',tag:[{type:'github',tagurl:'https://github.com/bingblog'}],desc:'百度高级web前端研发工程师。深度学习可视化工具VisualDL初期开发者之一。对表单设计、数据可视化、交互设计有着浓厚的兴趣~',url:'https://www.163.com/'},
					{name:'张思元',img:'https://eopa.bdstatic.com/daoshi%2F%E5%BC%A0%E6%80%9D%E8%BF%9C%E5%B0%8F.jpeg',tag:[{type:'github',tagurl:'https://github.com/jiangjiu'}],desc:'百度前端工程师。关注合理的高可复用架构设计、质量焦点、项目中的技术管理、软件工程。致力于创造极致的用户体验和可交互性。。关注合理的高可复用架构设计、质量焦点、项目中的技术管理、软件工程。致力于创造极致的用户体验和可交互性。',url:'https://www.163.com/'}
					]
			}
		},
		created() {
			console.log(this.teacherList)
		}
	}
</script>

<style>
	.box{
		position: relative;
		width: 100%;
		height:483px;
	}
	.des{
		position: absolute;
		width: 100%;
		height: 483px;
		background-image: url(../../assets/banner_ab41422.jpg); 
		background-size:cover;
		
	}
	.desbanner{
		width: 33.3%;
		height: 40%;
		position: absolute;
		left: 12%;
		top: 30%;
	}
	.desbanner > a{
		display: inline-block;
		width: 41%;
		height: 10%;
		font-size: 14px;
		margin-top: 25px;
		padding: 10px 0px;
		margin-right: 10px;
		text-align: center;
	background: #38ba72;
	color: #fff;
	}
	.title1{
		color: #fff;
		    font-size: 36px;
		    font-weight: 500;
		    margin-top: 0;
			margin-bottom: 5px;
	}
	.title2{
		color: #fff;
		    font-size: 20px;
		    opacity: .5;
		    font-weight: 500;
			margin: 0 0 10px;
	}
	
	.learnstep{
		border: 1px solid #ececec;
		position: relative;
		width: 63%;
		height: 363px;
		margin: 40px auto 30px auto;
		background-image: url(http://ife.baidu.com/2018/asset/common/img/learnMap_7785c38.jpg);
		background-size: 100% 100%;
	}
	.collegeInfo{
		font-size: 20px;
		font-weight: 200;
		color: #07111b;
		width: 63%;
		margin: 0 auto;
		padding-left: 6px;
	}
	.collegeBox{
		height:auto; 
		min-height: 465px;
		width: 65%;
		margin: 0 auto;
		height: auto;
	}
	.teacherTitle{
		    width: 67%;
		    height: 18px;
		    margin: 20px auto;
		    background: url(http://ife.baidu.com/2018/asset/common/img/teacherCourseTitle_9b733d6.png) center center no-repeat ;
		    -webkit-background-size: cover;
		    background-size: auto 100%; 
	}
	.teacherBox{
		overflow: auto;
		width: 66%;
		margin: 20px auto;
		padding: 20px;
	}
</style>
